<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精灵图的基本使用(the base use Sprite image )</title>
  <!-- 
    CSS精灵图（Sprite Image）是一种将多个图像合并到一个图像文件中，通过CSS背景定位来显示不同部分的技术。以下是关于CSS精灵图的使用要点： 
 
      1. 创建精灵图：将多个小图标或图片合并成一张大图，通常使用图像编辑工具将它们排列在同一张图像文件中。 
      2. 设置背景图像：通过CSS的 background-image 属性将精灵图应用到元素上，可以使用 url() 函数指定图像文件的路径。 
      3. 设置背景定位：使用 background-position 属性指定要显示的图像在精灵图中的位置，可以通过像素值或关键字（如top、right、bottom、left）进行定位。 
      4. 显示不同部分：通过调整 background-position 属性的值，可以在不同的元素或状态下显示精灵图中的不同部分，实现图像切换或动画效果。 
      5. 优点：使用CSS精灵图可以减少HTTP请求次数，提高页面加载速度和性能，同时减少图像资源文件的大小。 
   -->
   <style>
     .sprite-container {
       background-color: #333;
     }

     .sprite {
       background-image: url(../../images/topbar_sprite.png);
       background-repeat: no-repeat;
       display: inline-block;

     }

     .sprite.hot-icon {
       width: 26px;
       height: 13px;
       background-position: -192px 0;
     }

     .sprite.logo-icon {
       width: 157px;
       height: 33px;
       background-position: 0 -19px;
     }
   </style>
</head>
<body>
  
  <div class="sprite-container">
    <i class="sprite hot-icon"></i>
    <i class="sprite logo-icon"></i>
  </div>

</body>
</html>